<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>白嫖电影</title>
    <!-- === CSS === -->
    <link rel="stylesheet" href="bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/ionicons.css">
    <link rel="stylesheet" href="css/app.css">

    <style>
        .preview-container {
            width: 800px;
            height: 235px;
            margin: 0px auto;

            /*background-color: lightblue;*/
            background-color: transparent;
            /*outline: 1px solid #fefefe*/;
            /*position: relative;*/
            /*这样写子容器无法垂直居中*/
            /*父元素必须有定位*/
            position: relative;
            /* 水平垂直居中 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            /*注意：overflow:hidden一定要加在.container容器*/
            overflow: hidden;
        }

        .lefter,
        .righter {
            width: 50%;
            height: 100%;
            position: relative;
            background-color: transparent;
        }

        .movie-carousel {
            width: 100%;
            height: 100%;
            display: flex;
            /*float: left;*/
            /*轮播图过渡动画*/

            transition: 0.5s;
            background-color: transparent;
        !important;
        }

        .movie-carousel .item img {
            width: 400px;
            height: 235px;

        }

        #indicator {
            position: absolute;
            bottom: 10px;
            display: flex;
            /*outline: 1px solid #fff;*/
            left: 50%;
            transform: translateX(-50%);
        }

        #indicator span {
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;

        }

        #indicator span.active {
            background-color: #ffffff;
            border-color: #fff;
        }
    </style>
</head>
<body>

<!--=== navbar ===-->
<header class="header">
    <nav class="navbar navbar-expand-sm fixed-top">
        <!--导航栏开始-->
        <div class="container">
            <a class="navbar-brand" href="index.html"><img class="header-logo"
                                                           src="images/small-image/moviez-logo.png" alt="Main Logo">
            </a>
            <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#example-navbar" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                <i class="ion nav-more ion-android-menu"></i></button>
            <div class="collapse navbar-collapse" id="example-navbar" data-nav-image="assets/img/blurred-image-1.jpg">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="list.html">电影</a></li>
                    <li class="nav-item"><a class="nav-link" href="javascript:void(0);">影评</a></li>
                    <li class="nav-item"><a class="nav-link" href="search.html">搜索</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="1" data-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false">我的</a>
                        <div class="dropdown-menu" aria-labelledby="1">
                            <a class="dropdown-item" href="javascript:void(0);">账号管理</a>
                            <a class="dropdown-item" href="login.html">注销</a>

                        </div>
                    </li>
                    <li class="nav-item dropdown cart">
                        <a href="#" class="nav-link dropdown-toggle " id="navbarDropdownMenuLink"
                           data-toggle="dropdown">
                            <i class="ion ion-android-cart" aria-hidden="true"></i>
                            <span class="cart-number">0</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">购物车 <span class="text-right">0</span></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--导航栏结束-->
    </nav>
</header>

<div class="movie-detail-page movies-page">

    <!--=== movies 7 ===-->
    <section class="movies movie-7 movie-box movie-modify-7-3 pt-5 page-top-margin">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wrap-movie">
                        <div class="section-title-wrap">
                            <div class="section-title">即将上映</div>
                        </div>
                        <div class="movie-showcase-10 owl-carousel">
                            <div class="item">
                                <div class="movie-item">
                                    <div class="movie-item-img-wrap">
                                        <img class="movie-item-img" src="images/banner/banner-1.jpg" alt="Movie Banner">
                                    </div>
                                    <div class="movie-item-overlay text-center">
                                        <div class="movie-item-play-2 video-btn" data-toggle="modal"
                                             data-src="https://player.vimeo.com/video/131892249?badge=0"
                                             data-target="#call-video"><i class="ion ion-play"></i>观看预告片
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <div class="movie-item-img-wrap">
                                        <img class="movie-item-img" src="images/banner/banner-2.jpg" alt="Movie Banner">
                                    </div>
                                    <div class="movie-item-overlay text-center">
                                        <div class="movie-item-play-2 video-btn" data-toggle="modal"
                                             data-src="https://www.youtube.com/embed/x02xX2dv6bQ"
                                             data-target="#call-video"><i class="ion ion-play"></i>观看预告片
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <div class="movie-item-img-wrap">
                                        <img class="movie-item-img" src="images/banner/banner-3.jpg" alt="Movie Banner">
                                    </div>
                                    <div class="movie-item-overlay text-center">
                                        <div class="movie-item-play-2 video-btn" data-toggle="modal"
                                             data-src="https://player.vimeo.com/video/131892249?badge=0"
                                             data-target="#call-video"><i class="ion ion-play"></i>观看预告片
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--=== movies 7 ===-->
    <section class="movies movie-7 movie-box movie-modify-7-3">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wrap-movie">
                        <div class="section-title-wrap">
                            <div class="section-title">预告片</div>
                        </div>
                        <div class="preview-container">
                            <div class="lefter">
                                <div class="movie-carousel">
                                    <div class="item">
                                        <a><img src="http://media.simoniu.com/movie001.png"/></a>
                                    </div>
                                    <div class="item">
                                        <a><img src="http://media.simoniu.com/movie002.png"/></a>
                                    </div>
                                    <div class="item">
                                        <a><img src="http://media.simoniu.com/movie003.png"/></a>
                                    </div>
                                    <div class="item">
                                        <a><img src="http://media.simoniu.com/movie004.png"/></a>
                                    </div>
                                </div>
                                <div id="indicator">
                                    <span class="active"></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                            <div class="righter">

                                <div style="width: 100%; height: 100%; position: absolute; background-color: #000;">
                                    <video id="player" src="http://media.simoniu.com/movie001.mp4" controls autoplay
                                           width="400px"
                                           height="235px" type="video/mp4"></video>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--=== movies 7 ===-->
    <section class="movies movie-7 movie-box movie-modify-7-2">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wrap-movie">
                        <div class="section-title-wrap">
                            <div class="section-title">热门档</div>
                        </div>
                        <div class="movie-showcase-8 owl-carousel">
                            <div class="item">
                                <div class="movie-item">
                                    <div class="movie-item-img-wrap">
                                        <img class="movie-item-img" src="images/poster/slider-poster-1.jpg"
                                             alt="Movie Thumb">
                                    </div>
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><img class="img-fluid"
                                                                          src="images/small-image/hbo_logo.svg"
                                                                          alt="Movie Thumb"></div>
                                        <ul class="movie-item-genre">
                                            <li class="movie-item-year">2018</li>
                                            <li class="movie-item-type">Movie</li>
                                            <li class="movie-item-series">Action</li>
                                        </ul>
                                        <div class="movie-item-title">Batman arkham knight</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <div class="movie-item-img-wrap">
                                        <img class="movie-item-img" src="images/poster/slider-poster-2.jpg"
                                             alt="Movie Thumb">
                                    </div>
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><img class="img-fluid"
                                                                          src="images/small-image/imdb-logo.svg"
                                                                          alt="Movie Thumb"><span>9.2</span></div>
                                        <ul class="movie-item-genre">
                                            <li class="movie-item-year">2017</li>
                                            <li class="movie-item-type">TV Show</li>
                                            <li class="movie-item-series">Drama</li>
                                        </ul>
                                        <div class="movie-item-title">Batman arkham knight</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <div class="movie-item-img-wrap">
                                        <img class="movie-item-img" src="images/poster/slider-poster-3.jpg"
                                             alt="Movie Thumb">
                                    </div>
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><img class="img-fluid"
                                                                          src="images/small-image/imdb-logo.svg"
                                                                          alt="Movie Thumb"><span>9.1</span></div>
                                        <ul class="movie-item-genre">
                                            <li class="movie-item-year">2017</li>
                                            <li class="movie-item-type">TV Show</li>
                                            <li class="movie-item-series">Action</li>
                                        </ul>
                                        <div class="movie-item-title">Batman arkham knight</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <div class="movie-item-img-wrap">
                                        <img class="movie-item-img" src="images/poster/slider-poster-4.jpg"
                                             alt="Movie Thumb">
                                    </div>
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><img class="img-fluid"
                                                                          src="images/small-image/imdb-logo.svg"
                                                                          alt="Movie Thumb"><span>8.9</span></div>
                                        <ul class="movie-item-genre">
                                            <li class="movie-item-year">2015</li>
                                            <li class="movie-item-type">TV Show</li>
                                            <li class="movie-item-series">Drama</li>
                                        </ul>
                                        <div class="movie-item-title">Batman arkham knight</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--=== movies 2 ===-->
    <section class="movies movie-2">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wrap-movie">
                        <div class="section-title-wrap">
                            <div class="section-title">内地电影</div>
                        </div>
                        <div class="movie-showcase-2 owl-carousel">
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/p2414157745.jpg"
                                         alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">倩女幽魂</div>
                                        <div class="movie-item-genre"><span>程小东</span></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>9.5</div>
                                        <div class="movie-item-price">2011-04-30</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/game-of-thrones-2.jpg"
                                         alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Season 02</div>
                                        <div class="movie-item-genre"><span>10</span>Series</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>8.5</div>
                                        <div class="movie-item-price">$29.00</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/game-of-thrones-3.jpg"
                                         alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Season 03</div>
                                        <div class="movie-item-genre"><span>10</span>Series</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>8.5</div>
                                        <div class="movie-item-price">$29.00</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/game-of-thrones-4.jpg"
                                         alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Season 04</div>
                                        <div class="movie-item-genre"><span>10</span>Series</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>8.5</div>
                                        <div class="movie-item-price">$29.00</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/game-of-thrones-5.jpg"
                                         alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Season 05</div>
                                        <div class="movie-item-genre"><span>10</span>Series</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>8.5</div>
                                        <div class="movie-item-price">$29.00</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/game-of-thrones-6.jpg"
                                         alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Season 06</div>
                                        <div class="movie-item-genre"><span>10</span>Series</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>8.5</div>
                                        <div class="movie-item-price">$29.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--=== movies 1 ===-->
    <section class="movies movie-1">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wrap-movie">
                        <div class="section-title-wrap">
                            <div class="section-title">国外电影</div>
                        </div>
                        <div class="movie-showcase-1 owl-carousel">
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/p2016401659.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">傲慢与偏见</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>2010-07-26
                                        </div>
                                        <div class="movie-item-genre">乔·赖特</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/p2220734673.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">怦然心动</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>2010-07-26
                                        </div>
                                        <div class="movie-item-genre">罗伯·莱纳</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/the-orginials.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Batman arkham knight</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>7/10</div>
                                        <div class="movie-item-genre">Action, Drama</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/the-expanse.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Tomb-rider</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>6/10</div>
                                        <div class="movie-item-genre">Crime, Drama</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/the-walking-dead.jpg"
                                         alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Dark Night</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>5/10</div>
                                        <div class="movie-item-genre">Action, Crime</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/colony.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-title">Assassin's Creed</div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>4/10</div>
                                        <div class="movie-item-genre">Action, Drama</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--=== movies 5 ===-->
    <section class="movies movie-5">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wrap-movie">
                        <div class="section-title-wrap">
                            <div class="section-title">豆瓣高分</div>
                        </div>
                        <div class="movie-showcase-5 owl-carousel">
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/die-hard.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>9/10</div>
                                        <div class="movie-item-title">Batman arkham knight</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/it.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>3/10</div>
                                        <div class="movie-item-title">The Witcher 3</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/oblivion.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>8/10</div>
                                        <div class="movie-item-title">Uncharted 4</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/Inception.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>7/10</div>
                                        <div class="movie-item-title">The Witcher 3</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/the-forest.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>6/10</div>
                                        <div class="movie-item-title">Uncharted 4</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/Skyfall.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>5/10</div>
                                        <div class="movie-item-title">The Witcher 3</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/jurassic-park.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>4/10</div>
                                        <div class="movie-item-title">Uncharted 4</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="movie-item">
                                    <img class="movie-item-img" src="images/poster/it.jpg" alt="Movie Thumb">
                                    <div class="movie-item-overlay">
                                        <div class="movie-item-play"><i class="ion ion-play"></i></div>
                                        <div class="movie-item-rate"><i class="ion ion-android-star"></i>3/10</div>
                                        <div class="movie-item-title">The Witcher 3</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

<!--=== Modal video ===-->
<div class="modal popup-video fade" id="call-video" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="close" data-dismiss="modal" aria-label="Close"><i class="ion ion-ios-close-outline"></i>
                </div>
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
                            allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<!--=== footer area ===-->
<section class="footer-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-logo"><img src="images/small-image/moviez-logo.png" alt="footer logo"></div>
                <div class="subscribe">
                    <p>做中国影迷最喜欢的免费电影资源库！<br>我们的口号是：永远白嫖，永不收费！</p>
                </div>

            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>商务合作</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">招商引资</a></li>
                        <li class=""><a href="#">意见投诉</a></li>
                        <li class=""><a href="#">我要求片</a></li>
                        <li class=""><a href="#">版权声明</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>友情链接</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">豆瓣网</a></li>
                        <li class=""><a href="#">中国电影网</a></li>
                        <li class=""><a href="#">1080影视大全</a></li>
                        <li class=""><a href="#">爱奇艺</a></li>
                        <li class=""><a href="#">牛牛编程</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>投资者关系</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">关于我们</a></li>
                        <li class=""><a href="#">公司简介</a></li>
                        <li class=""><a href="#">发展历程</a></li>
                        <li class=""><a href="#">加入我们</a></li>
                        <li class=""><a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <hr class="d-md-none d-lg-block">
        </div>


        <hr>
        <div class="row">
            <div class="col-12">
                <div class="footer-wrap text-center">
                    <!--ul class="list-inline social-icon">
                        <li class="list-inline-item"><i class="ion ion-social-twitter"></i></li>
                        <li class="list-inline-item"><i class="ion ion-social-linkedin"></i></li>
                        <li class="list-inline-item"><i class="ion ion-social-dribbble-outline"></i></li>
                    </ul-->
                    <div class="footer-tag">2018-2023 &copy; 华清远见 | 作者：西蒙牛</div>
                </div>
                <div style="text-align: center;color: #ccc">
                    [<a href="admin/login.html">后台管理</a>]
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ==== js ==== -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/app.js"></script>

<script>
    let dom = {
        carousel: document.querySelector(".movie-carousel"),
        indicators: document.querySelectorAll("#indicator span"),
        player: document.querySelector("#player")
    }

    function moveTo(index) {
        dom.carousel.style.transform = `translateX(-${index}00%)`;
        let active = document.querySelector("#indicator span.active");
        active.classList.remove('active');
        dom.indicators[index].classList.add('active');
        dom.player.setAttribute("src", `http://media.simoniu.com/movie00${index + 1}.mp4`);
    }

    dom.indicators.forEach((e, i) => {
        e.onclick = function () {
            moveTo(i);
        }
    });
</script>
</body>
</html>